<template>
	<view v-if="detail.order_refund_id" class="container p-bottom">
		<!-- 顶部状态栏 -->
		<view class="detail-header dis-flex flex-y-center">
			<view class="header-backdrop"><image src="/static/images/refund-bg.png"></image></view>
			<view class="header-state">
				<text class="f-32 col-f">{{ detail.state_text }}</text>
			</view>
		</view>

		<!-- 商品详情 -->
		<form @submit="onGoodsDetail" report-submit="true" :data-id="detail.order_goods.goods_id">
			<button class="btn-normal" formType="submit">
				<view class="detail-goods b-f m-top20 dis-flex flex-dir-row">
					<view class="left"><image class="goods-image" :src="detail.order_goods.image.file_path"></image></view>
					<view class="right dis-flex flex-box flex-dir-column flex-x-around">
						<view class="goods-name">
							<text class="twolist-hidden">{{ detail.order_goods.goods_name }}</text>
						</view>
						<view class="dis-flex col-9 f-24">
							<view class="flex-box">{{ detail.order_goods.goods_attr }}</view>
							<text class="t-r">×{{ detail.order_goods.total_num }}</text>
						</view>
					</view>
				</view>
			</button>
		</form>

		<!-- 付款金额 -->
		<view class="detail-order b-f row-block dis-flex flex-x-end flex-y-center">
			<text class="">付款金额：</text>
			<text class="col-m">￥{{ detail.order_goods.total_pay_price }}</text>
		</view>

		<!-- 已退款金额 -->
		<view v-if="detail.status.value == 20 && detail.type.value == 10" class="detail-order b-f row-block dis-flex flex-x-end flex-y-center">
			<text class="">已退款金额：</text>
			<text class="col-m">￥{{ detail.refund_money }}</text>
		</view>

		<!-- 售后信息 -->
		<view class="detail-refund b-f m-top20">
			<view class="detail-refund__row dis-flex">
				<view class="text"><text>售后类型：</text></view>
				<view class="flex-box">
					<text>{{ detail.type.text }}</text>
				</view>
			</view>
			<view class="detail-refund__row dis-flex">
				<view class="text"><text>申请原因：</text></view>
				<view class="flex-box">
					<text>{{ detail.apply_desc }}</text>
				</view>
			</view>
			<view v-if="detail.image.length > 0" class="detail-refund__row dis-flex">
				<view class="text"><text>申请凭证：</text></view>
				<view class="image-list flex-box">
					<view class="image-preview" v-for="(item, index) in detail.image" :key="index"><image mode="aspectFill" :src="item.file_path" @tap="previewImages" :data-index="index"></image></view>
				</view>
			</view>
		</view>

		<!-- 售后信息 -->
		<view v-if="detail.status.value == 10" class="detail-refund b-f m-top20">
			<view class="detail-refund__row dis-flex">
				<view class="text"><text class="col-m">拒绝原因：</text></view>
				<view class="flex-box">
					<text>{{ detail.refuse_desc }}</text>
				</view>
			</view>
		</view>

		<!-- 商家收货地址 -->
		<view v-if="detail.is_agree.value == 10" class="detail-address b-f m-top20">
			<view class="detail-address__row address-title"><text class="f-30 col-m">退货地址</text></view>
			<view class="detail-address__row address-details">
				<view class="address-details__row">
					<text>收货人： {{ detail.address.name }}</text>
				</view>
				<view class="address-details__row">
					<text>联系电话：{{ detail.address.phone }}</text>
				</view>
				<view class="address-details__row dis-flex">
					<view class="text"><text>详细地址：</text></view>
					<view class="flex-box">
						<text>{{ detail.address.detail }}</text>
					</view>
				</view>
			</view>
			<view class="detail-address__row">
				<view class="f-26 col-9"><text>· 未与卖家协商一致情况下，请勿寄到付或平邮</text></view>
				<view class="f-26 col-9"><text>· 请填写真实有效物流信息</text></view>
			</view>
		</view>

		<!-- 填写物流信息 -->
		<form v-if="detail.type.value == 10 && detail.is_agree.value == 10 && detail.is_user_send == 0" @submit="onSubmit" report-submit>
			<view class="detail-express b-f m-top20">
				<view class="form-group dis-flex flex-y-center">
					<view class="field">物流公司：</view>
					<view class="flex-box">
						<picker mode="selector" @change="onExpressChange" :range="expressList" range-key="express_name" name="express_id" :value="expressIndex >= 0 ? expressList[expressIndex].express_id : ''">
							<text v-if="expressIndex > -1">{{ expressList[expressIndex].express_name }}</text>
							<text v-else class="col-80">请选择物流公司</text>
						</picker>
					</view>
				</view>
				<view class="form-group dis-flex flex-y-center">
					<view class="field">物流单号：</view>
					<view class="flex-box"><input placeholder="请填写物流单号" name="express_no" /></view>
				</view>
			</view>

			<!-- 确认发货 -->
			<view class="padding-box profile-btn"><button formType="submit" :disabled="disabled">确认发货</button></view>
		</form>
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
import Route from '@/utils/Route.js';
export default {
	data() {
		return {
			// 售后单id
			order_refund_id: null,

			// 订单商品详情
			detail: {},

			// 物流公司索引
			expressIndex: -1,
			expressList: [],
			disable: false
		};
	},
	onLoad(options) {
		// 记录页面参数
		this.order_refund_id = options.order_refund_id;
	},
	onShow() {
		// 获取售后单详情
		this.getRefundDetail();
	},
	methods: {
		/**
		 * 获取售后单详情
		 */
		getRefundDetail() {
			this.$get(this.$api.getSharingRefundDetail, { order_refund_id: this.order_refund_id }, res => {
				this.expressList = res.data.expressList;
				this.detail = res.data.detail;
			});
		},
		/**
		 * 跳转商品详情
		 */
		onGoodsDetail(e) {
			// 记录formId
			this.$saveFormId(e.detail.formId);
			Route.navigateTo({
				url: '../../../goods/index?goods_id=' + e.currentTarget.dataset.id
			});
		},
		/**
		 * 凭证图片预览
		 */
		previewImages(e) {
			let imageUrls = [];
			this.image.forEach(function(item) {
				imageUrls.push(item.file_path);
			});
			wx.previewImage({
				current: imageUrls[e.target.dataset.index],
				urls: imageUrls
			});
		},
		/**
		 * 选择物流公司 picker
		 */
		onExpressChange(e) {
			this.expressIndex = e.detail.value;
		},

		/**
		 * 表单提交
		 */
		onSubmit(e) {
			let values = e.detail.value;

			// 记录formId
			this.$saveFormId(e.detail.formId);

			// 判断是否重复提交
			if (this.disable === true) {
				return false;
			}

			// 表单提交按钮设为禁用 (防止重复提交)
			this.disable = true;

			uni.showLoading({
				title: '正在处理...',
				mask: true
			});

			// 提交到后端
			values['order_refund_id'] = this.order_refund_id;
			this.$post(
				this.$api.postSharingRefundDelivery,
				values,
				res => {
					Tools.showSuccess(res.msg, () => {
						// 获取售后单详情
						this.getRefundDetail();
					});
				},
				false,
				() => {
					wx.hideLoading();
					// 解除禁用
					this.disable = false;
				}
			);
		}
	}
};
</script>

<style>
.container {
	font-size: 28rpx;
	color: rgb(78, 78, 78);
}

/* 顶部状态栏 */

.detail-header {
	position: relative;
	width: 100%;
	height: 140rpx;
}

.detail-header .header-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.detail-header .header-backdrop image {
	display: block;
	width: 750rpx;
	height: 140rpx;
}

.header-state {
	padding: 0 50rpx;
	z-index: 2;
}

/* 商品详情 */

.detail-goods {
	padding: 24rpx 20rpx;
}

.detail-goods .left .goods-image {
	display: block;
	width: 150rpx;
	height: 150rpx;
}

.detail-goods .right {
	padding-left: 20rpx;
}

.detail-order {
	padding: 15rpx 20rpx;
	font-size: 26rpx;
}

/* 售后详情 */

.detail-refund {
	padding: 15rpx 20rpx;
}

.detail-refund__row {
	margin: 20rpx 0;
}

/* 申请凭证 */

.image-list {
	margin-bottom: -15rpx;
}

.image-list .image-preview {
	margin: 0 15rpx 15rpx 0;
	float: left;
}

.image-list .image-preview image {
	display: block;
	width: 180rpx;
	height: 180rpx;
}

.image-list .image-preview:nth-child(3n + 0) {
	margin-right: 0;
}

/* 商家收货地址 */

.detail-address {
	padding: 20rpx 30rpx;
}

.address-details {
	padding: 5rpx 0;
	border-bottom: 1px solid #eee;
}

.detail-address__row {
	margin: 15rpx 0;
}

.address-details .address-details__row {
	margin: 10rpx 0;
}

/* 填写物流信息 */

.detail-express {
	padding: 10rpx 30rpx;
}

.form-group {
	height: 60rpx;
	margin: 10rpx 0;
}

.form-group input {
	height: 100%;
}

/* 提交按钮 */

.profile-btn {
	margin-top: 60rpx;
}
</style>
